<template>
  <div class="chart" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart)
      const colors = ['#96D1E4', 'rgb(55, 200, 143)']
      const unit = [this.chartData.data1.unit, this.chartData.data2.unit]
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            let result = `<div>${params[0].axisValue}</br></div>`
            console.log(params)
            params.forEach((item) => {
              result += `<div><div style="display: flex; align-items: baseLine; justify-content: space-between;"><div style="display:flex;align-items: center; justify-content: center;"><div style="height: 10px; width: 10px; border-radius: 50%; display: inline-block; background-color: ${colors[item.seriesIndex]}"></div><span style="margin-right: 20px;">${item.seriesName}</span></div><span style="font-weight: bold; text-align: right">${item.value}${unit[item.seriesIndex]}</span></br></div></div>`
            })
            return result
            // return `${params[0].data}${unit[params[0].seriesIndex]}`
          }
        },
        grid: {
          bottom: '20%',
          top: '25%',
          left: '22%',
          right: '20%'
        },
        legend: {
          show: true,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontFamily: 'Adobe Heiti Std',
            fontSize: '12px',
            color: '#D9E8F4'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontSize: '12px',
                color: '#FFFFFF'
              }
            },
            data: this.chartData.xAxis.data
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.chartData.yAxis1.name,
            nameTextStyle: {
              padding: [0, 0, -5, 0],
              fontFamily: 'MicrosoftYaHeiUI',
              fontSize: '12px',
              color: '#FFFFFF'
            },
            alignTicks: true,
            axisLabel: {
              textStyle: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontSize: '12px',
                color: '#FFFFFF'
              }
            }
          },
          {
            type: 'value',
            name: this.chartData.yAxis2.name,
            nameTextStyle: {
              padding: [0, 0, -5, 0],
              fontFamily: 'MicrosoftYaHeiUI',
              fontSize: '12px',
              color: '#FFFFFF'
            },
            axisLabel: {
              textStyle: {
                fontFamily: 'MicrosoftYaHeiUI',
                fontSize: '12px',
                color: '#FFFFFF'
              }
            }
          }
        ],
        dataZoom: [
          {
            show: this.chartData.data1.data.length > 4,
            start: 0,
            end: 400 / this.chartData.data1.data.length,
            top: 200,
            bottom: 10
          }
        ],
        series: [
          {
            name: this.chartData.data1.name,
            type: 'bar',
            barGap: 0.1,
            barWidth: '11px',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: '#96D1E4' },
                { offset: 0, color: '#00C1FF' }
              ]),
              barWidth: '11px'
            },
            data: this.chartData.data1.data
          },
          {
            name: this.chartData.data2.name,
            type: 'line',
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: 'rgb(55, 200, 143)',
              borderColor: '#fff',
              borderWidth: 1
            },
            lineStyle: {
              normal: {
                color: 'rgb(55, 200, 143)',
                shadowColor: 'rgba(55, 200, 143, .4)',
                shadowBlur: 8,
                shadowOffsetY: 10,
                shadowOffsetX: 0
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.chartData.data2.data
          }
        ]
      }
      this.chartInstance.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>
